<template>
    <div class="tabVue" :style="{background:tabVuebackground}">
        <div class="tabVue-item"  v-for="(item,index) in tabArr" :key="item.label" :class="{activeTabClass:index==current}" @click="tabFn(index)">
            <span>{{item.label}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name:"tabVue",
    props:{
        tabArr:Array,
        curTabIndex:Number,
        tabVuebackground:{ type : String, default : ()=>{ return '#fff' } },
    },
    data(){
        return {
            current:0,
        }
    },
    created(){
        this.curTabIndex?this.current = this.curTabIndex:"";
    },
    methods:{
        /*tab切换 */
        tabFn(i){
            this.current=i;
            this.$emit('getCurTabIndexFn',i);
        }
    }
}
</script>

<style lang='stylus' scoped>
.tabVue
    box-sizing  content-box
    line-height 40px
    display inline-flex
    justify-content flex-start
    align-items center
    border-bottom 1px solid #DCDFE6
    width 100%
    .tabVue-item
        position relative
        text-align center
        font-size 14px
        margin-right 32px
        color #909399 
        cursor  pointer
        span 
            font-family "SourceHanSansCN-Regular"
    .activeTabClass
        color #3296FA 
        bottom -2px
        border-bottom 3px solid #3296FA
        span 
            font-family "SourceHanSansCN-Medium"
</style>
